<!--
 * @Author: HangLi 316461408@qq.com
 * @Date: 2023-06-05 15:43:57
 * @LastEditors: HangLi 316461408@qq.com
 * @LastEditTime: 2023-07-04 19:56:03
 * @FilePath: /legal_guardian_user/pages/tabbar/findLawyer.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
	<view class="content">
		<scroll-view scroll-y class="forst-cate-list">
			<view v-for="(item, index) in cateList" :key="item.id" class="font-28-M ellipsis"
				:class="{ 'bg-main': cateCheck === index }" @click="cateCheck = index">
				{{ item.name }}
			</view>
		</scroll-view>
		<scroll-view scroll-y class="second-cate-list">
			<view v-for="(item) in cateList[cateCheck].children" :key="item.id" class="font-28-M ellipsis"
				@click="toList(item.name)">
				{{ item.name }}
			</view>
		</scroll-view>
	</view>
</template>

<script setup>
import {
	onShow,
	onShareAppMessage
} from '@dcloudio/uni-app';
import {
	ref
} from 'vue';
import api from '@/api/index.js';

onShareAppMessage(() => {});

const cateList = ref([]);
const cateCheck = ref(0);

// 法律类型
const getLegalType = () => {
	api.base.getLegalType().then(res => {
		cateList.value = res;
	});
}
// 跳转律师列表
const toList = skill => {
	uni.navigateTo({
		url: `/pagesA/lawyer/list?skill=${skill}`
	});
}

onShow(() => {
	getLegalType();
});
</script>

<style lang="less" scoped>
.content {
	display: flex;
	flex-flow: row nowrap;

	.forst-cate-list {
		width: 250rpx;
		height: 100vh;
		overflow: scroll-y;
		background: #F6F6F6;

		view {
			height: 88rpx;
			text-align: center;
			line-height: 88rpx;

			&.bg-main {
				color: #fff;
				font-weight: bold;
			}
		}
	}

	.second-cate-list {
		width: calc(100vw - 250rpx);
		height: 100vh;

		view {
			height: 88rpx;
			text-align: center;
			line-height: 86rpx;
			border-bottom: 2rpx solid rgba(0, 0, 0, 0.12);
			color: #999;
		}
	}
}
</style>
<style>
page {
	background: #fff;
}
</style>